<template>
  <div class="info-dialog">
    <el-dialog
      :visible.sync="visible"
      :title="title"
      :modal-append-to-body="true"
      :append-to-body="true"
      :destroy-on-close="false"
      :modal="true"
      :close-on-click-modal="false"
      top="10vh"
      width="1000px"
      @closed="closed"
    >

    <el-row :gutter="10" style="margin-bottom: 0.3125rem;">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          :loading="loading"
        >新增</el-button>
      </el-col>
    </el-row>

    <el-table
      ref="multiplesceneDataTable"
      :data="tableData"
      border
      empty-text="暂无数据."
      style="width: 100%">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        prop="name"
        label="名称"
        >
      </el-table-column>
      <el-table-column
        prop="cloudKey"
        label="渲染口令"
        >
      </el-table-column>

      <el-table-column
        prop="cloudUrl"
        label="渲染地址"
        >
      </el-table-column>

      <el-table-column label="操作" align="left" fixed="right">
        <template slot-scope="scope">
          <el-button type="text" icon="el-icon-edit-outline" size="small" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="text" icon="el-icon-view" size="small" @click="handleRander(scope.row)">预览</el-button>
          <el-button type="text" icon="el-icon-delete" size="small" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>

    <el-row>
      <el-col :span="24">
        <div align="right" style="margin-top: 0.3125rem;">
          <el-pagination background layout="prev, pager, next" :current-page="page.cur" :page-size="page.limit" :total="page.total" @current-change="handleCurrentChange" />
        </div>
      </el-col>
    </el-row>


    </el-dialog>


    <!--弹出窗口-->
    <el-dialog title="添加" :close-on-click-modal="false" :visible.sync="dialogFormVisible" autocomplete="off" width="500px" >
      <el-form ref="sceneDataForm" :model="sceneDataForm" :rules="sceneDataFormRules">
        <el-input
          ref="id"
          v-model="sceneDataForm.id"
          autocomplete="off"
          name="id"
          type="hidden"
          style="display: none;"
        />
        <el-input
          ref="id"
          v-model="sceneDataForm.dictId"
          autocomplete="off"
          name="dictId"
          type="hidden"
          style="display: none;"
        />

        <el-form-item label-width="80px" label="名称" prop="name">
          <el-input
            ref="name"
            v-model="sceneDataForm.name"
            placeholder="请输入名称"
            autocomplete="off"
            name="label"
          />
        </el-form-item>
        <el-form-item label-width="80px" label="渲染口令" prop="cloudKey">
          <el-input ref="cloudKey" v-model="sceneDataForm.cloudKey" placeholder="请输入渲染口令" autocomplete="off" name="cloudKey" />
        </el-form-item>
        <el-form-item label-width="80px" label="渲染地址" prop="cloudUrl">
          <el-input ref="cloudUrl" v-model="sceneDataForm.cloudUrl" placeholder="请输入渲染地址" autocomplete="off" name="cloudUrl" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialogForEdit()">取消</el-button>
        <el-button :loading="loading" type="primary" @click="submitForm">保存</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
  import {
    findSceneRendererList,
    saveSceneRenderer,
    deleteSceneRendererById
  } from '@/api/51world/sceneRendererSrc.js'

  import {
    isOk
  } from '@/utils/request'

  export default {
    name: 'RendererDialog',
    components: {
    },
    props: {
      properties: {
        type: Object,
        default: () => ({})
      }
    },
    computed:{
    },
    watch:{
      properties: {
        handler: function(value) {
          this.visible = value.visible
          if (value.data) {
            this.sceneData= value.data
            this.title = value.data.cnName
          } else {
            this.sceneData={}
          }
        },
        immediate: true,
        deep: false
      }
    },
    created() {
      this.load();
    },
    data(){
      return {
        visible:false,
        title:'',
        loading:false,
        sceneData: {
        },
        queryForm: {
          dictId:''
        },
        tableData: [],
        page: {
          cur: 1,
          limit: 10,
          total: 0
        },
        dialogFormVisible:false,
        sceneDataForm:{
          id:'',
          sceneId:'',
          name:'',
          cloudKey:'',
          cloudUrl:'',
          status:'0',
        },
        sceneDataFormRules: {
          name: [{
            required: true,
            message: '请输入名字',
            trigger: 'blur'
          },
          {
            min: 2,
            max: 50,
            message: '长度在 2 到 50 个字符',
            trigger: 'blur'
          }
          ],
          cloudKey: [{
            required: true,
            message: '请输入渲染口令',
            trigger: 'blur'
          }
          ],
          cloudUrl: [{
            required: true,
            message: '请输入渲染地址',
            trigger: 'blur'
          }
          ]
        }
      }
    },
    methods:{
      load(){
        this.loading=true
        findSceneRendererList({
          sceneId: this.sceneData.id,
          cur: this.page.cur,
          limit: this.page.limit,
        }).then(rsp => {
          if(isOk(rsp)){
            const _data = rsp.data.list
            this.page.total = rsp.data.totalRow
            this.tableData = _data
            this.loading = false
          }
        }).catch(err => {
          console.log(err);
        })
        .finally(() => {
          this.loading = false
        })
      },
      handleCurrentChange(cur) {
        this.page.cur = cur
        this.load()
      },
      openDialogForEdit(data) {
        const _this = this
        if (data) {
          _this.sceneDataForm = data
        } else {
          this.reset();
        }
        _this.dialogFormVisible = true
      },
      closeDialogForEdit() {
        const _this = this
        _this.dialogFormVisible = false
        _this.loading = false
        this.reset();
        _this.$refs['sceneDataForm'].resetFields()
      },
      handleAdd(){
        this.openDialogForEdit();
      },
      handleEdit(data) {
        this.openDialogForEdit(data)
      },
      reset(){
        this.sceneDataForm={
          id:'',
          sceneId:this.sceneData.id,
          name:'',
          cloudKey:'',
          cloudUrl:'',
          status:'0',
        };
      },
      submitForm: function() {
        this.$refs.sceneDataForm.validate((valid) => {
          if (valid) {
            this.loading = true
            saveSceneRenderer(this.sceneDataForm).then(rsp => {
              if (isOk(rsp)) {
                this.$message({
                  type: 'success',
                  message: rsp.message
                })
                this.load();
                this.closeDialogForEdit();
                this.loading = false
              }
            })
          }
        })
      },
      handleDelete(data) {
        const _this = this
        _this
          .$confirm('确认删除?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          .then(() => {
            deleteSceneRendererById({
              id: data.id
            }).then(rsp => {
              if (rsp.code === 200) {
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                })
                _this.load()
              }
            })
          })
          .catch(() => {})
      },
      handleRander(row){
        this.$router.push({path: '/editor', query: {sceneId: row.sceneId,renderId: row.id}})
      },
      closed: function() {
        this.$emit('closed', false)
      },
    }
  }

</script>

<style>
</style>
